7.08 使用模板继承
1、list.html里面引用了新图标文件,需要将新图标文件复制到index.html
<link rel="stylesheet" href="{% static 'bootstrap3/bootstrap.min.css' %}">
2、在panel-body里面加入block contest
<div class="panel-body">
{% block contest %}
<div class="jumbotron">
<!--加入项目主体颜色jumbotron-->
<h1>欢迎来到盛凌报价系统</h1>
<p>只有你想不到的,没有做不到的</p>
<a class="btn btn-primary btn-lg" role="button" href="/book/list">开始吧</a>
<!-- btn-primary为按钮颜色,btn-lg为加大-->
</div>
{% endblock %}
</div>
3、在list.html中导入模板
{% extends "index.html" %}
{% block content %}
<a href="" class="btn btn-success">添加</a>
<table class="table table-hover table-striped">
<thead>
<tr>
<th>ID</th>
<th>书名</th>
<th>价格</th>
<th>出版日期</th>
<th>作者</th>
<th>出版社</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for book in books %}
<tr>
<td>{{ book.id}}</td>
<td>{{ book.title}}</td>
<td>{{ book.price}}</td>
<td>{{ book.publish_date}}</td>
<td>{{ book.publisher}}</td>
<td>{{ book.authors}}</td>
<td>
<a href="" class="btn btn-primary btn-xs">
<i class="fa-solid fa-pen" style="color:primary"></i>
</a>
<a href="" class="btn btn-danger btn-xs">
<i class="fa-solid fa-trash fa-1x" aria-hidden="true"></i>
</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}